<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/share.css"/><!--分享-->
    <link rel="stylesheet" href="../../css/info-list.css"/>
    <link rel="stylesheet" href="../../css/comment.css"/>
    <title>快讯详情</title>
    <style>

        body {
            background-color: white;
        }

        .pd520 {
            padding: 0.1rem 0.4rem 0.3rem 0.4rem;
        }

        .flash-detail-kx-time {
            color: rgba(34, 34, 34, 0.45);
        }

        .flash-detail-kx-content {
            margin-top: 0.34rem;
            color: #333333;
            line-height: 0.6rem;
        }

        .flash-detail-title {
            color: #222222;
            line-height: 0.62rem;
        }

        .flash-detail-time {
            margin: 0.24rem 0;
            color: rgba(34, 34, 34, 0.45);
        }

        .flash-detail-content {
            background: #F7F8F9;
            padding: 0.36rem 0.24rem;
            color: rgba(34, 34, 34, 0.8);
            line-height: 0.6rem;
        }

        .flash-detail-link {
            background: #F7F7F9;
            height: 1.6rem;
            padding: 0.2rem 0.24rem;
        }

        .flash-detail-img img {
            width: 100%;
            /*height: 3rem;*/
        }

        .flash-detail-link-content {
            height: 1rem;
            line-height: 0.5rem;
            color: #333333;
            padding-right: 0.1rem
        }

        .flash-detail-link-icon {
            border-radius: 2px;
            border: 1px solid #f6f6f6;
            padding: 0.01rem 0.02rem;
            position: relative;
            top: -0.025rem;
        }

        .flash-detail-link-img {
            height: 1.2rem;
            width: 1.56rem;
        }

        .flash-detail-mzsm {
            color: #A1A1A1;
            line-height: 0.36rem;
        }


        .flash-detail-line + div {
            color: #222222;
            margin: 0 0.2rem;
        }

        .flash-detail-divide {
            width: 7.5rem;
            background-color: #F7F7F7;
            height: 0.16rem;
            margin: 0.72rem 0 0.4rem 0;
        }

        .flash-detail-list {
            max-height: 15rem;
        }

        .p4 {
            padding: 0 0.4rem;
        }

        .p4:first-child {
            color: #222222;
            margin-bottom: 0.04rem;
        }

        .flash-detail-split {
            width: 7.5rem;
            height: 0.01rem;
            background: rgba(0, 0, 0, 0.15);
        }

        .flash-detail-kx-icon {
            width: 1.6rem;
            height: 0.34rem;
        }
        .flash-detail-split {
            width: 7.5rem;
            height: 0.01rem;
            background: rgba(0, 0, 0, 0.15);
        }

    </style>
</head>
<body>

<div class="flash-detail-wrap flex-column ff400 h-100-p">
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar "></div>
        <!--导航栏-->
        <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 flex-1 line1"></div>
            <div class="flex-row">
                <div class="flex-row justify-content-center right-bar-mult" onclick="judgeOrCollect()">
                    <span class="flash-detail-sc iconfont iconshoucang1 fs17"></span>
                    <span class="flash-detail-sc iconfont iconshoucang fs17" style="color:#2C68F5;display:none"></span>

                </div>
                <div class="flex-row justify-content-center right-bar-mult" onclick="dealShare()">
                    <span class="iconfont iconfenxiang1 fs16"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-1 scoll-y scoll-area">
        <div class="pd520">
            <div class="flash-detail-kx mb20" style="display: none">
                <div class="flex-row">
                    <div>
                        <svg class="flash-detail-kx-icon icon" aria-hidden="true">
                            <use xlink:href="#iconkuaixun"/>
                        </svg>
                    </div>
                    <div class="flash-detail-kx-time ml10 fspx14"></div>
                </div>
                <div class="flash-detail-kx-content fspx16"></div>
            </div>
            <div class="flash-detail-kp" style="display: none">
                <!--快讯内容-->
                <div class="flash-detail-title ff500 fspx19"></div>
                <!--快讯时间-->
                <div class="flash-detail-time fspx13"></div>
                <!--快讯快评-->
                <div class="flash-detail-content fspx16 mb20"></div>
                <!--文章链接 -->
                <div class="flash-detail-link mt20 mb20 flex-row justify-content-between">
                </div>
                <div class="flash-detail-img">
                </div>
            </div>
            <!--免责声明-->
            <div class="flash-detail-mzsm fspx12 mb10">免责声明：文章内容仅供参考，不构成投资建议。投资者据此操作，风险自担。文章部分内容来自网络，如有涉及侵权烦请联系JT²智管有方资讯部责任编辑，我们将第一时间处理。</div>

            <!--分享-->
            <div class="flash-detail-share flex-column">

            </div>
        </div>
        <div class="flash-detail-divide"></div>

        <div class="flash-detail-list-wrap p4">
            <div class="fspx18 ff600">延伸阅读</div>
        </div>
        <div class="flash-detail-list"></div>
        <!--<div class="flash-detail-split mt20"></div>-->

    </div>
    <!--<div class="flash-detail-split"></div>-->
    <div class="comment-area">
    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script>
  let pm = {
    pageNum: 1,
    pageSize: 5,
    isScroll: false,
    infoId: '',
    infoType: '',
    defaultImg: 'https://zzb.jddglobal.com/customer/manager/download/zzb/jpg/addf93df-df8c-43ec-b041-35a895b837f3.jpg',
    isCollect: 0,
    isThumb: 0,
    commentCnt: 0,
    thumbsupCnt: 0,
    datasource: 2,
    stockList: [],
    title: '',
    shareImg: '',
    isLogin: false
  }

  function initPage(params) {
    pm.infoId = params.infoId
    pm.infoType = params.infoType
    //状态栏自适应
    Utils.sbhAdaptive()
    pm.isLogin = !user.isGuest
    // 查看收藏状态
    findCollectStatus()
    //获取明细
    getDetail()
    getCommentInfo()
    getExtended()
    pageScroll()
  }

  function reLoadPage() {
    pm.isLogin = !user.isGuest
    // 查看收藏状态
    findCollectStatus()
    //获取明细
    getDetail()
    getCommentInfo()
    getExtended()
  }

  function startPage(params) {
    pm.isLogin = !user.isGuest
    getCommentInfo()
  }

  //获取快讯明细
  function getDetail() {
    Server.flashDetail.getNewsFlashDetail({
      infoId: pm.infoId,
      pageNum: pm.pageNum,
      pageSize: pm.pageSize
    }).then(function success(data) {
      pm.shareImg = data.info.shareImgUrl
      if (data.commentContent || data.infoList.length > 0 || data.fileList.length > 0) {
        $('.flash-detail-kp').show()
        $('.flash-detail-kx').hide()
        $('.flash-detail-title').html(data.info.content)
        pm.title = data.info.content
        if (data.commentContent) {
          let contentList = data.commentContent.split('\n')
          contentList.forEach(function (item) { //对快讯做换行处理
            $('.flash-detail-content').append('<div class="mb10">' + item + '</div>')
          })

        } else {
          $('.flash-detail-content').hide()
        }
        $('.flash-detail-time').html(data.info.issuerDttmStr)
        if (data.infoList && data.infoList.length > 0) {
          data.infoList[0].coverImgUrl = data.infoList[0].coverImgUrl ? data.infoList[0].coverImgUrl : pm.defaultImg

          let jsonStr = JSON.stringify({
            infoId: data.infoList[0].infoId,
            infoType: data.infoList[0].infoType
          })
          let htmlStr = '         <div class=\'flash-detail-link-content fspx14 line2\' onclick=\'goDetail(' + jsonStr + ')\'>\n' +
            '             <span class=\'iconfont iconlianjie2 fspx15\' style=\'color: #2C68FF;\'>' +
            '             </span>' + data.infoList[0].mainTitle + '' +
            '         </div>' +
            '         <div>' +
            '             <img class=\'flash-detail-link-img\' src=\'' + data.infoList[0].coverImgUrl + '\'>' +
            '         </div>'
          $('.flash-detail-link').html(htmlStr)
        } else {
          $('.flash-detail-link').hide()
        }
        if (data.fileList && data.fileList.length > 0) {
          data.fileList.forEach(function (item) {
            $('.flash-detail-img').append('<img class=\'mb10\'  src=\'' + item + '\'>')
          })
        } else {
          $('.flash-detail-img').hide()
        }
      } else {
        $('.flash-detail-kx-content').html(data.info.content)
        $('.flash-detail-kx-time').html(data.info.issuerDttmStr)
        $('.flash-detail-kp').hide()
        $('.flash-detail-kx').show()
      }

      $('.flash-detail-share').html(Template.share())

    }).catch(function (reason) {

    })
  }

  // 延伸阅读
  function getExtended() {
    Server.flashDetail.getInfoListSearch({
      infoId: pm.infoId,
      pageNum: pm.pageNum,
      pageSize: pm.pageSize
    }).then(function success(data) {
      let num = 0
      let htmlStr = ''
      pm.stockList = []
      $.each(data.infoListSearch, function (i, item) {
        if (item.infoType === '1' || item.infoType === '3') {
          num++
          htmlStr += Template.dealInfo(item)
          htmlStr += '<div class="info-list-topborder"></div>'
        }
      })
      if (num > 0) {
        $('.flash-detail-list').html(htmlStr)
        $('.flash-detail-list .info-list-topborder').last().remove()
        Template.stockRise()
      } else {
        $('.flash-detail-list-wrap').hide()
        $('.flash-detail-divide').hide()
      }
    })
  }

  //收藏状态
  function findCollectStatus() {
    Server.flashDetail.findCollectStatus({
      collectionObjectId: pm.infoId,
      objectSource: pm.infoType,
    }).then(function (data) {
      //如果data._code大于0則說明已收藏
      if (data.isCollect > 0) {
        pm.isCollect = 1
        $('.flash-detail-sc').toggle()
      }
    })
  }

  //点击收藏
  function judgeOrCollect() { //修改收藏的状态
    if (pm.isLogin) {
      $('.flash-detail-sc').toggle()
      pm.isCollect = pm.isCollect === 1 ? 0 : 1
      Server.flashDetail.addOrModifyCollectionInfo({
        collectionObjectId: pm.infoId,
        objectSource: pm.infoType,
        datasource: pm.datasource,
        status: pm.isCollect,
      }).then(function (data) {
        // 弹出收藏、取消收藏成功
        if (data.code === 0) {
          jsBridge.callBridge('toast', {msg: (pm.isCollect === 1 ? '收藏成功' : '取消收藏成功')})
        }
      })
    } else {
      Utils.goLogin()
    }
  }


  //查看点赞状态
  function queryThumbStauts() {
    Server.flashDetail.queryThumbStauts({
      thumbupObjectId: pm.infoId,
      status: 1,
    }).then(function (data) {
      if (data.isThumb > 0) {
        pm.isThumb = 1
        $('.comment-thumbsup-icon').addClass('comment-thumbsup-c')
      }
    })
  }

  // 点赞文章
  function goThumb() {
    if (pm.isLogin) {
      if (pm.isThumb === 1) { // 如果是取消点赞
        pm.isThumb = 0
        $('.flash-detail-wrap .comment-thumbsup-icon').removeClass('comment-thumbsup-c')
        pm.thumbsupCnt = pm.thumbsupCnt === 1 ? '' : (pm.thumbsupCnt - 1)
        $('.flash-detail-wrap .comment-thumbsup-cnt').text(pm.thumbsupCnt)
      } else {// 如果是点赞
        pm.isThumb = 1
        $('.flash-detail-wrap .comment-thumbsup-icon').addClass('comment-thumbsup-c')
        pm.thumbsupCnt = pm.thumbsupCnt ? (pm.thumbsupCnt + 1) : 1
        $('.flash-detail-wrap .comment-thumbsup-cnt').text(pm.thumbsupCnt)
      }
      Server.flashDetail.updateThumbsupInfo({
        thumbupObjectId: pm.infoId,
        objectSource: pm.infoType,
        datasource: pm.datasource, // 1、ios 2、安卓
        status: pm.isThumb
      }).then(function (data) {
        if (data.code === 0) {
          jsBridge.callBridge('toast', {msg: (pm.isThumb === 1 ? '点赞成功' : '取消点赞成功')})
        }
      })
    } else {
      Utils.goLogin()
    }

  }


  // 跳转统一评论列表
  function goComment() {
    goCommentList({infoId: pm.infoId, infoType: pm.infoType})
  }


  function showInput(v) {
    if (v === 0) {//取消发布
      $('.comment-show').hide()
    } else if (v === 1) { //发布评论

      if (Utils.emojiJudge($('.flash-detail-wrap .comment-content').val())){
        // 不允许输入表情
        jsBridge.callBridge('toast', {msg: '请勿输入表情'})
        return
      } else if ($('.flash-detail-wrap .comment-content').val() && $('.flash-detail-wrap .comment-content').val().trim()) {//如果有内容，则添加评论
        addCommentInfo()
        showInput(0)
      } else {//弹出内容不能为空
        jsBridge.callBridge('toast', {msg: '评论不能为空'})
      }
    }
  }

  // 添加评论
  function addCommentInfo() {
    Server.flashDetail.addCommentInfo({
      commentObjectId: pm.infoId,
      objectSource: pm.infoType,
      datasource: pm.datasource,
      content: $('.flash-detail-wrap .comment-content').val(),
    }).then(function (data) {
      if (data.code === 0) {
        jsBridge.callBridge('toast', {msg: '评论成功'})
        $('.flash-detail-wrap .comment-content').val('')
        // 跳转到评论列表
        goComment()
      }
    })
  }

  function writeComment() {
    if (pm.isLogin) {
      $('.comment-show').show()
      $('.comment-content').focus()
    } else {
      Utils.goLogin()
    }
  }

  //页面内分享
  function shareClick(scene) {
    if (pm.shareImg) {
      let item = {
        type: 'image',
        image: pm.shareImg ? pm.shareImg.trim() : '',
        scene: scene
      }
      Utils.goShare(item)
    } else {
      Server.infoIndex.getLoadShare({
        id: pm.infoId
      }).then(function (data) {
        if (data.url) {
          pm.shareImg = data.url
          let item = {
            type: 'image',
            image: pm.shareImg ? pm.shareImg.trim() : '',
            scene: scene
          }
          Utils.goShare(item)
        }
      })
    }

  }

  //弹窗分享
  function dealShare() {
    let item = {
      type: 'image',
      image: pm.shareImg ? pm.shareImg.trim() : ''
    }
    if (!pm.shareImg) {
      Server.infoIndex.getLoadShare({
        id: pm.infoId
      }).then(function (data) {
        if (data.url) {
          pm.shareImg = data.url
          item = {
            type: 'image',
            image: pm.shareImg ? pm.shareImg.trim() : ''
          }
          Template.shareWindow(item)
        }
      })
    }else{
      Template.shareWindow(item)
    }
  }

  // 获取评论数点赞数
  function getCommentInfo() {
    Server.flashDetail.getCommentInfo({
      infoId: pm.infoId
    }).then(function (data) {

      pm.commentCnt = data.commentCount
      pm.thumbsupCnt = data.thumbCount
      $('.comment-area').html(Template.commentDetail(data.commentCount, data.thumbCount))
      queryThumbStauts()

    })
  }

  //处理状态栏滚动效果
  function dealHead(scrollTop) {
    let currStop
    if (scrollTop < 64) {
      currStop = scrollTop
      $('.center-bar').html('')
      $('.left-bar').css({
        'color': 'rgb(34,34,34)'
      })
    } else {
      currStop = 64
      $('.center-bar').html(pm.title)
      $('.left-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
    }
    $('.placeholder-top').css({
      'background': 'rgba(255, 255, 255, ' + currStop / 64 + ')'
    })

  }

  /**
   * @param callback 翻页回调函数
   */
  function pageScroll() {
    $('.scoll-area').scroll(function () {
      //需要特殊处理的滚动区域，需要放在scroller元素区域内
      let scrollTop = $(this).scrollTop()
      dealHead(scrollTop)
    })
  }


</script>
</html>
